<%--
  Created by IntelliJ IDEA.
  User: xiaomi
  Date: 2025/2/4
  Time: 19:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>课程记录</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style>
        table {
            border-collapse: collapse;
            width: 80%;
        }

        table,
        th,
        td {
            border: 1px solid #87A7D9;
        }
        th,
        td {
            text-align: center;
            padding: 8px;
        }
        th{
            background: rgb(165, 184, 213);
            color: white;
        }
        button {
            padding: 5px 10px;
            margin: 5px;
            border: none;
            border-radius: 3px;
            background-color: rgb(165, 184, 213);
            color: white;
            cursor: pointer;
        }

        button:hover {
            background-color: rgb(125, 166, 217);
        }

        input[type = "checkbox"] {
            margin-right: 5px;
        }
    </style>
</head>
<body>
<table id="courseTable">
    <tr>
        <th>课程图片</th>
        <th>名称</th>
        <th>教师</th>
        <th>类型</th>
        <th>价格</th>
        <th>人数</th>
        <th>上课时间</th>
    </tr>
</table>
<script>
    $(document).ready(function () {
        // function setColorByState(cell, state) {
        //     if (state == 0) {
        //         cell.css('color', 'pink');
        //     } else if (state == 1) {
        //         cell.css('color', 'green');
        //     } else if (state == 2) {
        //         cell.css('color','red');
        //     }
        // }
        var state1 = sessionStorage.getItem('username');
        var del = "0";
        var list ={
            teachername: state1,
            del: del
        };
        // 使用AJAX获取课程信息
        $.ajax({
            url: './teacher/searchBy',
            type: 'POST',
            contentType: "application/json",
            data: JSON.stringify(list),  //将json数据转换为json字符串
            success: function (data) {
                var table = $('#courseTable');
                data.forEach(function (course) {
                    var row = $('<tr></tr>');
                    var imgCell = $('<td></td>');
                    var img = $('<img>', {
                        src: course.picture,
                        alt: '课程图片',
                        width: '100'
                    });
                    imgCell.append(img);
                    row.append(imgCell);

                    row.append($('<td></td>').text(course.classname));
                    row.append($('<td></td>').text(course.classteacher));
                    row.append($('<td></td>').text(course.classtype));
                    row.append($('<td></td>').text(course.money));
                    row.append($('<td></td>').text(course.number));
                    row.append($('<td></td>').text(course.time));
                    table.append(row);
                });
            },
            error: function () {
                alert('获取课程信息失败');
            }
        });
    });
</script>
</body>
</html>